<template>
  <div>
    <h2>
      {{ welcomeMsg }}
      <router-link to="/login" v-if="!userInfo.id">
        <el-button size="mini" round type="success">登录</el-button>
      </router-link>
      <router-link to="/register" v-if="!userInfo.id">
        <el-button size="mini" round type="primary">注册</el-button>
      </router-link>
    </h2>

    <div class="se-pre-con"></div>

    <div>
      <div class="banner-area shape">
        <div
          id="bootcarousel"
          class="carousel text-light text-large slide carousel-fade animate_text"
          data-ride="carousel"
        >
          <div class="carousel-inner text-center carousel-zoom">
            <div class="carousel-item active">
              <div
                class="slider-thumb bg-cover"
                style="background-image: url(assets/img/banner/6.jpg);"
              ></div>
              <div class="box-table shadow dark">
                <div class="box-cell">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-10 offset-lg-1">
                        <div class="content">
                          <ul data-animation="animated slideInLeft">
                            <li>精心护理</li>
                            <li>现代设备</li>
                          </ul>
                          <h2 data-animation="animated slideInDown">
                            甄选
                            <strong>宠物医疗</strong>
                          </h2>
                          <a class="btn btn-md btn-gradient" @click="goUrl('/appoint/guide')">了解更多</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div
                class="slider-thumb bg-cover"
                style="background-image: url(assets/img/banner/2.jpg);"
              ></div>
              <div class="box-table shadow dark">
                <div class="box-cell">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-10 offset-lg-1">
                        <div the="content">
                          <ul data-animation="animated slideInLeft">
                            <li>知名医护</li>
                            <li>强势入驻</li>
                          </ul>
                          <h2 data-animation="animated slideInDown">
                            保障您的
                            <strong>爱宠健康</strong>
                          </h2>
                          <a
                            data-animation="animated fadeInUp"
                            class="btn btn-md btn-gradient"
                      
                            @click="goUrl('/appoint/list')"
                          >了解更多</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <a class="left carousel-control light" href="#bootcarousel" data-slide="prev">
            <i class="fa fa-angle-left"></i>
            <span class="sr-only">上一个</span>
          </a>
          <a class="right carousel-control light" href="#bootcarousel" data-slide="next">
            <i class="fa fa-angle-right"></i>
            <span class="sr-only">下一个</span>
          </a>
        </div>
      </div>

      <div class="about-area features-area default-padding">
        <!-- 形状 -->
        <div class="shape">
          <img src="assets/img/shape/3.svg" alt="Shape" />
        </div>
        <!-- 结束形状 -->
        <div class="container-medium">
          <div class="about-items features-item-box">
            <div class="row">
              <div class="col-lg-5 info">
                <h5>关于我们</h5>
                <h2>为宠物提供保障平台，让天下没有难治的病！</h2>
                <p></p>
                <ul>
                  <li>
                    <div class="info">
                      <h4>急诊护理</h4>
                      <div class="items">
                        <span>高级护理</span>
                        <span>医学</span>
                        <span>宠物外科</span>
                        <span>心脏科</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="col-lg-7">
                <div class="row">
                  <div class="col-lg-6 col-md-6 single-item">
                    <div class="item">
                      <div class="thumb">
                        <img src="assets/img/features/3.jpg" alt="Thumb" />
                      </div>
                      <div class="content-box">
                        <div class="info-title">
                          <i class="flaticon-stethoscope"></i>
                          <h4>
                            <a href="#">健康指南·日常护理</a>
                          </h4>
                        </div>
                      </div>
                      <div class="info">
                        <p>为您提供专业的宠物日常护理知识，关注细节，保持健康，从日常饮食、运动到情绪管理，全方位呵护您的爱宠，确保它们健康快乐地成长。</p>
                        <a @click="goUrl('/appoint/guide')">
                          阅读更多
                          <i class="fas fa-angle-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-6 col-md-6 single-item">
                    <div class="item">
                      <div the="thumb">
                        <img src="assets/img/features/4.jpg" alt="Thumb" />
                      </div>
                      <div class="content-box">
                        <div class="info-title">
                          <i class="flaticon-ribbon"></i>
                          <h4>
                            <a href="#">健康指南·重病护理</a>
                          </h4>
                        </div>
                      </div>
                      <div class="info">
                        <p>专注于宠物重症管理和恢复，提供细致入微的护理方案，配合专业治疗，帮助您的爱宠战胜疾病，恢复活力。.</p>
                        <a @click="goUrl('/appoint/guide')">
                          阅读更多
                          <i class="fas fa-angle-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="services-area bg-gray default-padding-bottom bottom-less">
        <div class="container">
          <div class="services-items">
            <div class="row">
              <div class="col-lg-8 offset-lg-2">
                <div class="site-heading text-center">
                  <h4>服务</h4>
                  <h2>我们的科室</h2>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="services-single col-lg-6">
                <div class="item">
                  <div class="info">
                    <div class="top">
                      <i class="flaticon-wheelchair"></i>
                      <strong>01</strong>
                    </div>
                    <h4>
                      <a href="#">宠物外科</a>
                    </h4>
                    <p>为爱宠提供专业手术治疗，关爱每一次生命跃动。。</p>
                    <ul>
                      <li>关节</li>
                      <li>脊柱</li>
                      <li>运动医学</li>
                      <li>骨骼</li>
                      <li>脊柱融合</li>
                    </ul>
                    <a class="btn btn-md circle btn-gradient" @click="goUrl('/appoint/list')">
                      预约
                      <i class="fas fa-angle-right"></i>
                    </a>
                  </div>
                </div>
              </div>

              <div class="services-single col-lg-6">
                <div class="item">
                  <div class="info">
                    <div class="top">
                      <i class="flaticon-cracked-skin"></i>
                      <strong>02</strong>
                    </div>
                    <h4>
                      <a href="#">皮肤科</a>
                    </h4>
                    <p>守护宠物皮肤健康，专业呵护从此开始</p>
                    <ul>
                      <li>幼宠科</li>
                      <li>免疫皮肤科</li>
                      <li>美容皮肤科</li>
                      <li>皮肤病理科</li>
                    </ul>
                    <a class="btn btn-md circle btn-gradient" href="#"
                    @click="goUrl('/appoint/list')">
                      预约
                      <i class="fas fa-angle-right"></i>
                    </a>
                  </div>
                </div>
              </div>

              <div class="services-single col-lg-6">
                <div class="item">
                  <div class="info">
                    <div class="top">
                      <i class="flaticon-scalpel"></i>
                      <strong>03</strong>
                    </div>
                    <h4>
                      <a href="#">宠物内科</a>
                    </h4>
                    <p>宠物内科，专注内脏健康，给予您的爱宠全面呵护。</p>
                    <ul>
                      <li>腹腔镜手术</li>
                      <li>内窥镜手术</li>
                      <li>支气管镜手术</li>
                      <li>激光手术</li>
                      <li>电刀手术</li>
                    </ul>
                    <a class="btn btn-md circle btn-gradient" href="#"
                    @click="goUrl('/appoint/list')">
                      预约
                      <i class="fas fa-angle-right"></i>
                    </a>
                  </div>
                </div>
              </div>

              <div class="services-single col-lg-6">
                <div class="item">
                  <div class="info">
                    <div class="top">
                      <i class="flaticon-coronavirus"></i>
                      <strong>04</strong>
                    </div>
                    <h4>
                      <a href="#">病毒检查</a>
                    </h4>
                    <p>宠物病毒科，防控疾病，保护爱宠安全健康。</p>
                    <ul>
                      <li>快速诊断</li>
                      <li>抗体</li>
                      <li>风险</li>
                      <li>诊断测试</li>
                      <li>病毒培养</li>
                    </ul>
                    <a class="btn btn-md circle btn-gradient" href="#"
                    @click="goUrl('/appoint/list')">
                      预约
                      <i class="fas fa-angle-right"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="register-area default-padding bg-fixed shadow half text-light"
        style="background-image: url(assets/img/banner/7.jpg);"
      >
        <div class="container">
          <div class="register-items">
            <div class="row align-center">
              <div class="col-lg-6 form">
                <div class="appoinment-box">
                  <div class="heading">
                    <h2>预约</h2>
                  </div>

                  <button @click="goUrl('/appoint/list')">
                    提交预约
                    <i class="fa fa-paper-plane"></i>
                  </button>
                </div>
              </div>
              <div class="col-lg-6 info">
                <h5>免费咨询</h5>
                <h2>宠物体检、日常护理</h2>
                <p>为您的宠物提供及时的医疗和护理服务，确保每一次就医都是优质高效的体验。</p>
                <div class="steps">
                  <ul>
                    <li>
                      <i class="flaticon-calendar-1"></i>
                      <h5>预约</h5>
                    </li>
                    <li>
                      <i class="flaticon-doctor"></i>
                      <h5>选择医生</h5>
                    </li>
                    <li>
                      <i class="flaticon-heartbeat"></i>
                      <h5>咨询</h5>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTimeSlot } from "@/utils/util";
export default {
  name: "WelcomePage",
  data() {
    return {
      welcomeMsg: "早上好",
      userInfo: {
        username: "游客"
      }
    };
  },
  mounted() {
    setTimeout(() => {
      $(".se-pre-con").fadeOut("slow");
    }, 500);
  },
  methods: {
    goUrl(url) {
      if (this.userInfo.username === "游客" && !this.userInfo.id) {
        this.$message.error("请先登录");
        return;
      }
      this.$router.push(url);
    }
  },
  created() {
    let tempUserInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (tempUserInfo && tempUserInfo.username) {
      this.userInfo = tempUserInfo;
    }
    this.welcomeMsg = `${getTimeSlot()}好，${this.userInfo.username}`;
  },
};
</script>